<template>
  <BenchCompWrapper title="备件总览" style="margin-top: 14px">
    <template v-slot:content>
      <div class="banner">
        <div class="banner-item">
          <img :src="inLeft" alt="今日入库" />
          <div>
            <p class="banner-item-title">今日入库</p>
            <p class="banner-item-button">
              <span class="banner-item-count" @click="linkToIn">{{ data.todayInNum }}</span>
            </p>
            <p>
              <span class="banner-item-change">环比昨日</span>
              <span class="banner-item-icon" :class="getIconClass(data.todayInRingRatio)"
                >{{ data.todayInRingRatio === 0 ? "-" : getComputedCount(data.todayInRingRatio) }}
                <px-tooltip v-if="data.todayInRingRatio === 0" content="昨日为0，无法计算环比">
                  <px-icon class="ml-[4px] pointer relative top-[2px]"><HelpCircle /></px-icon>
                </px-tooltip>
                <px-icon v-if="data.todayInRingRatio > 0"><Top /></px-icon>
                <px-icon v-if="data.todayInRingRatio < 0"><Bottom /></px-icon>
              </span>
            </p>
          </div>
        </div>
        <div class="banner-item">
          <img :src="outLeft" alt="今日出库" />
          <div>
            <p class="banner-item-title">今日出库</p>
            <p class="banner-item-button">
              <span class="banner-item-count" @click="linkToOut">{{ data.todayOutNum }}</span>
            </p>
            <p>
              <span class="banner-item-change">环比昨日</span>
              <span class="banner-item-icon" :class="getIconClass(data.todayOutRingRatio)"
                >{{ data.todayOutRingRatio === 0 ? "-" : getComputedCount(data.todayOutRingRatio) }}
                <px-tooltip v-if="data.todayOutRingRatio === 0" content="昨日为0，无法计算环比">
                  <px-icon class="ml-[4px] pointer relative top-[2px]"><HelpCircle /></px-icon>
                </px-tooltip>
                <px-icon v-if="data.todayOutRingRatio > 0"><Top /></px-icon>
                <px-icon v-if="data.todayOutRingRatio < 0"><Bottom /></px-icon>
              </span>
            </p>
          </div>
        </div>
        <div class="banner-item">
          <img :src="inRight" alt="本月入库" />
          <div>
            <p class="banner-item-title">本月入库</p>
            <p class="banner-item-button">
              <span class="banner-item-count" @click="linkToIn">{{ data.monthInNum }}</span>
            </p>
            <p>
              <span class="banner-item-change">环比上月</span>
              <span class="banner-item-icon" :class="getIconClass(data.monthInRingRatio)"
                >{{ data.monthInRingRatio === 0 ? "-" : getComputedCount(data.monthInRingRatio) }}
                <px-tooltip v-if="data.monthInRingRatio === 0" content="上月为0，无法计算环比">
                  <px-icon class="ml-[4px] pointer relative top-[2px]"><HelpCircle /></px-icon>
                </px-tooltip>
                <px-icon v-if="data.monthInRingRatio > 0"><Top /></px-icon>
                <px-icon v-if="data.monthInRingRatio < 0"><Bottom /></px-icon>
              </span>
            </p>
          </div>
        </div>
        <div class="banner-item">
          <img :src="outRight" alt="本月出库" />
          <div>
            <p class="banner-item-title">本月出库</p>
            <p class="banner-item-button">
              <span class="banner-item-count" @click="linkToOut">{{ data.monthOutNum }}</span>
            </p>
            <p>
              <span class="banner-item-change">环比上月</span>
              <span class="banner-item-icon" :class="getIconClass(data.monthOutRingRatio)"
                >{{ data.monthOutRingRatio === 0 ? "-" : getComputedCount(data.monthOutRingRatio) }}
                <px-tooltip v-if="data.monthOutRingRatio === 0" content="上月为0，无法计算环比">
                  <px-icon class="ml-[4px] pointer relative top-[2px]"><HelpCircle /></px-icon>
                </px-tooltip>
                <px-icon v-if="data.monthOutRingRatio > 0"><Top /></px-icon>
                <px-icon v-if="data.monthOutRingRatio < 0"><Bottom /></px-icon>
              </span>
            </p>
          </div>
        </div>
        <div class="banner-item">
          <img :src="num" alt="备件总数" />
          <div>
            <p class="banner-item-title">备件总数</p>
            <p class="banner-item-button">
              <span class="banner-item-count" @click="linkToLedger">{{ data.totalNum }}</span>
            </p>
          </div>
        </div>
        <div class="banner-item">
          <img :src="alarmNum" alt="库存预警数" />
          <div>
            <p class="banner-item-title">库存预警数</p>
            <p class="banner-item-button">
              <span class="banner-item-count" @click="linkToLedger">{{ data.warningNum }}</span>
            </p>
          </div>
        </div>
      </div>
    </template>
  </BenchCompWrapper>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";

import num from "@/assets/images/signboard/num.png";
import inLeft from "@/assets/images/signboard/inLeft.png";
import outLeft from "@/assets/images/signboard/outLeft.png";
import inRight from "@/assets/images/signboard/inRight.png";
import outRight from "@/assets/images/signboard/outRight.png";
import alarmNum from "@/assets/images/signboard/alarmNum.png";
import { getOverview } from "@/api/erc/spareParts/signboard";
import type { OverviewDataType } from "@/api/erc/spareParts/signboard";

import BenchCompWrapper from "./BenchCompWrapper.vue";

const router = useRouter();

const data = ref<OverviewDataType>({
  todayInNum: 0,
  todayInRingRatio: 0,
  todayOutNum: 0,
  todayOutRingRatio: 0,
  monthInNum: 0,
  monthInRingRatio: 0,
  monthOutNum: 0,
  monthOutRingRatio: 0,
  totalNum: 0,
  warningNum: 0
});

const getIconClass = (count: number): string => {
  if (count > 0) {
    return "banner-item-increment";
  } else if (count < 0) {
    return "banner-item-decrement";
  } else {
    return "";
  }
};

const getComputedCount = (count: number): string => {
  if (count > 0) {
    return `+${count}%`;
  }
  return `${count}%`;
};

//跳转入库
const linkToIn = () => {
  router.push({
    path: "/erc/spareParts/warehousing",
    query: {
      approvalStatus: "pass"
    }
  });
};
//跳转出库
const linkToOut = () => {
  router.push({
    path: "/erc/spareParts/outbound",
    query: {
      approvalStatus: "pass"
    }
  });
};
//跳转台账
const linkToLedger = () => {
  router.push("/erc/spareParts/ledger");
};

onMounted(async () => {
  const res = await getOverview();
  data.value = res;
});
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 16px 0;
  background-color: #fff;

  .banner-item {
    align-items: flex-start;
    margin-right: 16px;
    display: flex;
    width: 16.6%;
    height: 72px;
    border-radius: 4px;
    img {
      margin-right: 12px;
      width: 44px;
      height: 44px;
    }
    .banner-item-title {
      font-size: 14px;
      color: rgb(0 0 0 / 80%);
      height: 14px;
      line-height: 14px;
    }
    .banner-item-button {
      height: 24px;
      margin-bottom: 12px;
    }
    .banner-item-increment {
      color: #10b981;
    }
    .banner-item-decrement {
      color: #ef4444;
    }
  }
  .banner-item-count {
    font-size: 24px;
    font-family:
      PingFangSC-Medium,
      PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    cursor: pointer;
    &:hover {
      color: #3b82f6;
    }
  }
  .banner-item-change {
    width: 60px;
    height: 12px;
    font-size: 12px;
    font-family:
      PingFangSC-Medium,
      PingFang SC;
    font-weight: 400;
    color: #909399;
    line-height: 12px;
  }
  .banner-item-icon {
    width: 31px;
    height: 12px;
    line-height: 12px;
    font-size: 12px;
    font-family:
      PingFangSC-Medium,
      PingFang SC;
    font-weight: 400;
  }
}
</style>
